<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <meta name="keywords" content="" />
        <meta name="description" content="" />
        <link rel="stylesheet" href="__ADMIN__/wx/css/default.css">
        <script type="text/javascript" src="__ADMIN__/wx/js/jquery-1.6.4.min.js"></script>
        <script type="text/javascript" src="__ADMIN__/wx/js/jquery.form.js"></script>
        <script type="text/javascript" src="__PUBLIC__/Admin/js/jquery-1.9.1.min.js"></script>
		<link rel="stylesheet" href="__ADMIN__/js/plugins/code/prettify.css" />
		<script charset="utf-8" src="__ADMIN__/js/plugins/kindeditor/kindeditor-all-min.js"></script>
		<script charset="utf-8" src="__ADMIN__/lang/zh_CN.js"></script>
		<script charset="utf-8" src="__ADMIN__/js/plugins/code/prettify.js"></script>
		<style type="text/css">
			.demo{width:620px; margin:30px auto}
			.demo p{line-height:32px}
			.btnfile{position: relative;overflow: hidden;margin-right: 4px;display:inline-block;*display:inline;padding:4px 10px 4px;font-size:14px;line-height:18px;*line-height:20px;color:#fff;text-align:center;vertical-align:middle;cursor:pointer;background-color:#5bb75b;border:1px solid #cccccc;border-color:#e6e6e6 #e6e6e6 #bfbfbf;border-bottom-color:#b3b3b3;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
			.btnfile input {position: absolute;top: 0; right: 0;margin: 0;border: solid transparent;opacity: 0;filter:alpha(opacity=0); cursor: pointer;}
			.progress { position:relative; margin-left:100px; margin-top:-24px; width:200px;padding: 1px; border-radius:3px; display:none}
			.bar {background-color: green; display:block; width:0%; height:20px; border-radius: 3px; }
			.percent { position:absolute; height:20px; display:inline-block; top:3px; left:2%; color:#fff }
			.files{height:22px; line-height:22px; margin:10px 0}
			.delimg{margin-left:20px; color:#090; cursor:pointer}
			.place{height:40px; background:url(__ADMIN__/images/righttop.gif) repeat-x;}
			.place span{line-height:40px; font-weight:bold;float:left; margin-left:12px;}
			.placeul li{float:left; line-height:40px; padding-left:7px; padding-right:12px; background:url(__ADMIN__/images/rlist.gif) no-repeat right;}
			.placeul li:last-child{background:none;}
		</style>		
		<script>
			 $(function(){
		       	  $('#address').blur(function(){
					 var address = $('#address').val();
					 var data = {
						'address':address
					 }	
					 $.post("{:U('Admin/Beautician/getCoordinates')}",data,function(msg){
						 if (msg.longitude == '') {
							alert('该地址无法获取到百度经纬度');
						 } else {
			              $('#longitudeId').val(msg.longitude);
			              $('#lotitudeId').val(msg.latitude);
						 }
					 },'json');
	             });
			 });
		</script>
    </head>
    <body>
    	<div class="place">
		    <span>位置：</span>
		    <ul class="placeul">
		    	<li>首页</li>
		    	<li>添加服务项目</li>
		    </ul>
		</div>
        <div class="col_main">
        	<form action="{:U('add')}" method="post" enctype="multipart/form-data">
            <div class="main_bd">
                <div class="media_edit_area">
                    <div id="js_appmsg_editor">
                        <div class="appmsg_editor" style="margin-top: 0px;">
                        	<input type="hidden" name="longitude" value="" id="longitudeId"/>
			        	  	<input type="hidden" name="latitude" value="" id="lotitudeId"/>
			        	  	<input type="hidden" name=city value="">
			              	<input type="hidden" name="province" value="">
                        	<input type="hidden" name="number" id="number" value="{$number}">
                            <div class="inner">
                                <div class="appmsg_edit_item">
                                    <label for="" class="frm_label">美容师姓名</label>
                                    <span class="frm_input_box"><input type="text" class="frm_input js_title" name="name" value=""/></span>
                                </div>
                                <div class="appmsg_edit_item">
                                    <label for="" class="frm_label">
                                        <strong class="title">个人头像</strong>
                                        <p class="js_cover_tip tips">（大图片建议尺寸：100像素 * 100像素）</p>
                                    </label>
                                    <div class="upload_wrap">
                                       	<div class="upload_box">
                                        	<input type="hidden" name="profile_img" id="cover"/>
                                            <div class="upload_area">
	                                            <div class="btnfile">
										            <span>上传</span>
										            <input id="fileupload" type="file" name="profile_img">
										        </div>
										        <div class="progress">
										    		<span class="bar"></span><span class="percent">0%</span >
												</div>
										        <div class="files"></div>
										        <div id="showimg"></div>
	                                        </div>
	                                    </div>
	                                </div>
	                            </div>
	                            
	                            <div class="appmsg_edit_item">
                                    <label for="" class="frm_label">手机号</label>
                                    <span class="frm_input_box"><input type="text" class="frm_input js_title" name="mobile" value=""/></span>
                                </div>
                                
                                <div class="appmsg_edit_item">
                                    <label for="" class="frm_label">密码</label>
                                    <span class="frm_input_box"><input type="password" class="frm_input js_title" name="password" value=""/></span>
                                </div>
                                
                                <div class="appmsg_edit_item">
                                    <label for="" class="frm_label">住	址</label>
                                    <span class="frm_input_box"><input type="text" class="frm_input js_title" name="address" id="address" value=""/></span>
                                </div>
                                
                                <div class="appmsg_edit_item">
                                    <label for="" class="frm_label">搜索范围</label>
                                    <span class="frm_input_box"><input type="text" class="frm_input js_title" name="search_area" value="{$item.search_area}"/></span>
                                </div>
                                
	                            <div class="appmsg_edit_item">
                                    <label for="" class="frm_label">美容师介绍</label>
									<span class="frm_textarea_box"><textarea class="js_desc frm_textarea" name="beautician_desc"></textarea></span>
								</div>
                                
                                <div class="appmsg_edit_item">
                                    <label for="" class="frm_label">认证证书</label>
                                    <input name="upload_certification" type="file" id="uploadCertification" multiple>
                                </div>
                                
                                <div class="appmsg_edit_item">
                                	<ul id="uploadCertificationContainer"></ul>
                                </div>
                                
                                <div class="appmsg_edit_item">
                                    <label for="" class="frm_label">工作经历</label>
                                    <ul class="service_step">
                                    	<li class="step">
                                    		<label for="" class="frm_label">工作经历：<span class="number">1</span></label>
	                                    	<span class="frm_input_box">
	                                    		<input type="text" class="frm_input js_title" name="work_start[]" value="" placeholder="2013.03"/>
	                                    	</span>
	                                    	<span class="frm_input_box">
	                                    		<input type="text" class="frm_input js_title" name="work_end[]" value="" placeholder="2013.03"/>
	                                    	</span>
	                                    	<span class="frm_input_box">
	                                    		<input type="text" class="frm_input js_title" name="work_beauty_parlor[]" value="" placeholder="所工作的美容院"/>
	                                    	</span>
	                                    	<span class="frm_input_box">
	                                    		<select name="job_title_id[]">
	                                    			<foreach name="jobTitles" item="jobTitle">
	                                    			<option value="{$jobTitle.id}">{$jobTitle.title}</option>
	                                    			</foreach>
	                                    		</select>
	                                    	</span>
                                    	</li>
                                    	<li><a id="addStep">添加工作经历</a></li>
                                    </li>
                                </div>
                        	</div>
                    	</div>
                	</div>
	                <div class="tool_area">
	                    <div class="tool_bar border tc">
	                        <span id="js_submit" class="btn btn_input btn_primary"><button type="submit" id="submit">保存</button></span>
	                    </div>
	                </div>
            	</div>
        	</div>
        </form>
		<script src="__ADMIN__/js/plugins/fileupload/jquery.ui.widget.js"></script>
		<script src="__ADMIN__/js/plugins/fileupload/jquery.iframe-transport.js"></script>
		<script src="__ADMIN__/js/plugins/fileupload/jquery.fileupload.js"></script>
		<script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp"></script>
        <script type="text/javascript">
        	function deleteStep(elem) {
        		var step = $(elem).parents('li');
        		
        		step.remove();
        		
        		$('.step').each(function (i, obj) {
        			$(obj).find('.number').text(i + 1);
        		});
        	}
        	
        	$(function () {
        		var callbacks={ 
            			//若服务请求成功，则运行以下函数，并将结果传入 
            			complete:function(result){ 
          		            var latlng = result.detail.location; 
          		          	$("input[name='province']").val(result.detail.addressComponents.province);
          		          	$("input[name='city']").val(result.detail.addressComponents.city);
          		        }, 
           		        //若服务请求失败，则运行以下函数 
           		        error:function(){
           		        	alert("出错了。请先填写地址！"); 
           		        } 
           		    }
    				
         		    //创建类实例 
         		    geocoder = new qq.maps.Geocoder(callbacks); 
        		
        		$('input[name="address"]').change(function () {
        			if ($(this).val() !== '') {
        				geocoder.getLocation($(this).val());
        			}
        		});
        		
        		$("#addStep").click(function () {
        			var createStep = '<li class="step">'
                       	+'<label for="" class="frm_label">工作经历：<span class="number">'+($('.step').length + 1)+'</span></label>'
                    	+'<span class="frm_input_box">'
                    		+'<input type="text" class="frm_input js_title" name="work_start[]" value="" placeholder="2012.03"/>'
                    	+'</span>'
                    	+'<span class="frm_input_box">'
                    		+'<input type="text" class="frm_input js_title" name="work_end[]" value="" placeholder="2013.03"/>'
                    	+'</span>'
                    	+'<span class="frm_input_box">'
                    		+'<input type="text" class="frm_input js_title" name="work_beauty_parlor[]" value="" placeholder="所在美容院名称"/>'
                    	+'</span>'
                    	+'<span>'
                    		+'<select name="job_title_id[]">'
                    			+'<foreach name="jobTitles" item="jobTitle">'
                    			+'<option value="{$jobTitle.id}">{$jobTitle.title}</option>'
                    			+'</foreach>'
                    		+'</select>'
                    	+'</span>'
                   	+'</li>';
        			$('.service_step .step:last').after(createStep);
        		});
        		
        		$("#fileupload").fileupload({
          			url: "{:U('/Admin/Beautician/uploadProfileImg')}",
          			dropZone: null,
          			pasteZone: null,
          			autoUpload: true,
          			limitConcurrentUploads: 5,
          			add: function (e, data) {
          				if (e.isDefaultPrevented()) {
          	                return false;
          	            }

          				$(".upload_wrap").show().find('.progress').show();
          	            data.submit();
          			},
          			formData:{
          				
          			},//如果需要额外添加参数可以在这里添加  
          			done:function(e, result){  
          		        var data = result.result;
          	          	var container = $(".upload_wrap");
          	          	
          	          	$("#cover").val(data.name);
          	          	
          	          	var showimg = $('#showimg');
          	          	showimg.html("<img src='"+data.url+"' style='width:100px; height:100px;'>");
          	          
          	          	container.find('.progress').hide();
          			},
          		    progress: function (e, data) {
          		    	var container = $(".upload_wrap");
          		    	var progress = Math.floor(e.delegatedEvent.loaded/e.delegatedEvent.total * 100);
          		    	container.find('.bar').attr('style', 'width:'+progress + '%');
          		    	container.find('.percent').text(progress + '%');
          		    }
          		});
        		
        		$("#uploadCertification").fileupload({
        			url: "{:U('/Admin/Beautician/uploadCertification')}",//文件上传地址，当然也可以直接写在input的data-url属性内  
        			singleFileUploads: true,
        			dropZone: null,
        			pasteZone: null,
        			autoUpload: true,
        			limitConcurrentUploads: 5,
        			add: function (e, data) {
        	            if (e.isDefaultPrevented()) {
        	                return false;
        	            }

        	            var html = '';
        	            for (var i in data.files) {
        	            	html += '<li class="uploadLi" >'
        	              		+'<div class="div_img">'
        	              			+'<div class="progress">'
										+'<span class="bar"></span><span class="percent">0%</span >'
									+'</div>'
        	              		+'</div>'
        	              	+'</li>';
        	            }
        	            
        	            $('#uploadCertificationContainer').append(html);
        	            data.submit();
        	        },
        			formData:{
        				num: $('#number').val()
        			},//如果需要额外添加参数可以在这里添加  
        			done:function(e, result){  
        		        //done方法就是上传完毕的回调函数，其他回调函数可以自行查看api  
        		        //注意result要和jquery的ajax的data参数区分，这个对象包含了整个请求信息  
        		        //返回的数据在result.result中，假设我们服务器返回了一个json对象  
        		        
        		       var completeElem = $(result.content).parents('.uploadLi');
        		        
        		        var data = result.result;
        		        var html = '<li class="uploadLi" >'
        	          		+'<input type="hidden" name="certification_img_name[]" value="'+data[0].name+'">'
        	          		+'<div class="div_img">'
        	          			+'<img style="width: 100%" src="'+data[0].url+'" />'
        	          		+'</div>'
        	          	+'</li>';
        	          	
        		        completeElem.replaceWith(html);
        			},
        		    progress: function (e, data) {
        		    	var files = data.originalFiles;
        		    	var file = data.files [0];
        		    	var index;
        		    	for (var i in files) {
        		    		if (files [i].name == file.name) {
        		    			index = i;
        		    		}
        		    	}
        		    	
        		    	var $progressElems = $('#uploadCertificationContainer').find('.progress');
        		    	var progress = Math.floor(e.delegatedEvent.loaded/e.delegatedEvent.total * 100);
        		    	var progressElem = $progressElems.eq(index);
        		    	data.content = progressElem;
        		    	progressElem.find('.bar').attr('style', 'width:'+progress + '%');
        		    	progressElem.find('.percent').text(progress + '%');
        		    }
        		});
        		
        		$(".delimg").on('click',function(){
        			var pic = $(this).attr("rel");
        			$.post("{:U('ajax_delete_img')}",{imagename:pic},function(msg){
        				if(msg==1){
        					files.html("删除成功.");
        					showimg.empty();
        					progress.hide();
        					$("#new_img_default").attr("src", "");
        					$(".appmsg_thumb").hide();
        					$("#zixun_img_path").val("");
        					$(".default").show();
        				}else{
        					alert(msg);
        				}
        			});
        		});
        	});
        </script>
    </body>
</html>